<template>
  <div>
    <el-main>
      <div class="box">
        <div class="top">
          <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-suffix=":" size="medium">
            <el-form-item label="统计方式">
              <el-select v-model="queryForm.mode" style="width: 160px;">
                <el-option label="月度统计" value="monthStatistics"></el-option>
                <el-option label="年度统计" value="yearStatistics"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="旗区名称" v-if="areacode == '1506'">
              <el-select style="width: 160px" v-model="queryForm.selectedXzqh">
                <el-option v-for="item in xzqhOptions" :key="item.xzqhcode" :label="item.xzqhname"
                  :value="item.xzqhcode"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间(月)" v-show="queryForm.mode == 'monthStatistics'">
              <el-date-picker v-model="queryForm.yearMonth" style="width: 160px" type="month" value-format="yyyy-MM"
                :clearable="false" placeholder="选择年月">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间(年)" v-show="queryForm.mode == 'yearStatistics'">
              <el-date-picker v-model="queryForm.year" style="width: 160px" type="year" value-format="yyyy"
                :clearable="false" placeholder="选择年月">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="statistics">统计</el-button>
            </el-form-item>
            <el-form-item v-show="queryForm.mode == 'monthStatistics'">
              <el-button type="success" @click="resetstatistics">重新统计</el-button>
            </el-form-item>
          </el-form>
          <div style="
              float: right;
              margin-right: 60px;
              display: flex;
              align-items: center;
            "></div>
        </div>
        <div class="center">
          <keep-alive>
            <component :is="queryForm.mode" ref="refquery"></component>
          </keep-alive>
        </div>
      </div>
      <div class="bottom">
        <el-pagination :current-page="currentPage" hide-on-single-page background
          layout="total, prev, pager, next, jumper" :total="totalItems" :page-size="pageSize"
          @current-change="handleCurrentChange" />
      </div>
    </el-main>
  </div>
</template>

<script>
import { GetPermission } from "@/utils/auth.js";
import moment from 'moment'
import monthStatistics from './monthStatistics.vue';
import YearStatistics from './yearStatistics.vue';
export default {
  components: { monthStatistics, YearStatistics },
  name: "ScoreDeductionStatistics",
  data() {
    return {
      areacode: '1506',
      queryForm: {
        yearMonth: '',
        year: '',
        mode: 'monthStatistics',
        selectedXzqh: "150602", // 默认选中150602
      },
      componentId: 'monthStatistics',
      paginatedData: [], // 当前页的数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据量
      totalItems: 0, // 总项目数
      xzqhOptions: [
        { xzqhname: "全区", xzqhcode: "1506" },
        { xzqhname: "东胜区", xzqhcode: "150602" },
        { xzqhname: "康巴什区", xzqhcode: "150601" },
        { xzqhname: "达拉特旗", xzqhcode: "150621" },
        { xzqhname: "准格尔旗", xzqhcode: "150622" },
        { xzqhname: "鄂托克前旗", xzqhcode: "150623" },
        { xzqhname: "鄂托克旗", xzqhcode: "150624" },
        { xzqhname: "杭锦旗", xzqhcode: "150625" },
        { xzqhname: "乌审旗", xzqhcode: "150626" },
        { xzqhname: "伊金霍洛旗", xzqhcode: "150627" },
      ],
    };
  },
  created() {
    let areacode = GetPermission().areacode;
    this.areacode = areacode;
    this.queryForm.selectedXzqh = areacode;
    const currentDate = moment().format('YYYY-MM');
    this.queryForm.yearMonth = currentDate;
    const currentDate2 = moment().format('YYYY');
    this.queryForm.year = currentDate2;
    this.$nextTick(() => {
      this.statistics();
    });
  },
  methods: {
    handleCurrentChange(val) {
      // 当用户切换分页时触发
      this.currentPage = val;
      // this.paginateData();
    },
    statistics() {
      console.log(this.queryForm);
      if (this.queryForm.mode == 'monthStatistics') {
        this.$refs.refquery.init(this.queryForm.yearMonth, this.queryForm.selectedXzqh);
      } else if (this.queryForm.mode == 'yearStatistics') {
        this.$refs.refquery.init(this.queryForm.year, this.queryForm.selectedXzqh);
      }
    },
    resetstatistics() {
      this.$api.resetDenFenMonth(this.queryForm.yearMonth).then((res) => {
        console.log('resetDenFenMonth---', res);
        this.statistics();
        this.$message.success(res.data.data);
      })
    }
  },
};
</script>

<style scoped></style>
